<template>
  <div class="settle_page">
    <el-form ref="form" :model="form" :rules="formRules" size="small" label-width="120px" class="el_form">
      <el-form-item label="城市：">{{settleInfo.cityName}}</el-form-item>
      <el-form-item label="门诊：">{{settleInfo.hospitalName}}</el-form-item>
      <el-form-item label="输出时间：">{{settleInfo.outputTime}}</el-form-item>
      <el-form-item label="对接人：">{{settleInfo.principal}}</el-form-item>
      <el-form-item label="应结算额：">{{settleInfo.oughtSettleAmount}}</el-form-item>
      <el-form-item label="实际结算额：" prop="actualSettleAmount">
        <el-input-number v-model="form.actualSettleAmount" class="a_input" placeholder="请输入实际结算额" :controls="false"></el-input-number>
      </el-form-item>
      <el-form-item label="回款时间：" prop="collectionTime">
        <el-date-picker v-model="form.collectionTime" class="a_input" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="发票需求：" prop="invoiceNeed">
        <el-select v-model="form.invoiceNeed" class="a_select">
          <el-option label="否" value="0"></el-option>
          <el-option label="是" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发票进度：" prop="invoiceProgress">
        <el-select v-model="form.invoiceProgress" class="a_select">
          <el-option label="待申请" value="0"></el-option>
          <el-option label="处理中" value="1"></el-option>
          <el-option label="已出具" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="转款凭证：">
        <image-upload v-model="form.transferVoucher" :limit="3"></image-upload>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input type="textarea" v-model="form.remark" :rows="5" resize="none"></el-input>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import {
  broadcast,
  deepClone,
  showToast,
  showModal,
  downPackFile,
} from "@/common/util";
import {
  SAVE_BILLINGRECORDS_SETTLED,
  GET_BILLINGRECORDS_INFO,
} from "@/http/finance";
import { DEALTYPE } from "@/common/constants";
import ImageUpload from "@/components/upload";
import { BASEURL } from '@/http/interface';
export default {
  name: "InfoMent",
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
    id: {
      type: [String, Number],
      default: "",
    },
  },
  components: {
    ImageUpload,
  },
  data() {
    return {
      form: {},
      formRules: {
        actualSettleAmount: [
          { required: true, message: "请输入实际结算额", trigger: "blur" },
        ],
        collectionTime: [
          { required: true, message: "请选择回款时间", trigger: "change" },
        ],
        invoiceNeed: [
          { required: true, message: "请选择发票需求", trigger: "change" },
        ],
        invoiceProgress: [
          { required: true, message: "请选择发票进度", trigger: "change" },
        ],
      },
      settleInfo: {},
    };
  },
  created() {
    this.settleInfo = this.info;
    if (this.id) {
      this.getInfo(this.id);
    }
  },
  mounted() {},
  methods: {
    // 处理参数
    getParams() {
      let oParams = deepClone(this.form);
      let list = oParams.transferVoucher || [];
      let arr = [];
      list.map((k) => {
        arr.push(k.path);
      });
      oParams.transferVoucher = arr.toString();
      oParams.id = this.settleInfo.id;
      return oParams;
    },

    // 保存数据
    saveInfo() {
      let _this = this;
      _this.$refs.form.validate((valid) => {
        if (!valid) {
          _this.$emit("change");
          return false;
        }
        let oParams = _this.getParams();
        SAVE_BILLINGRECORDS_SETTLED(oParams).then((res) => {
          if (res.code != 200) {
            _this.$emit("change");
            return false;
          }
          showToast({
            message: "保存成功",
            type: "success",
          });
          _this.$emit("change", true);
        });
      });
    },

    // 获取详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_BILLINGRECORDS_INFO(oParams).then((res) => {
        let obj = res.data || {};
        let options = {};
        let arr = []
        let list = []
        if(obj.transferVoucher){
            arr = obj.transferVoucher.split(',')
            arr.map(k => {
                let o = {}
                o.name = k
                o.path = k
                o.url = BASEURL + k
                list.push(o)
            })
        }
        options.actualSettleAmount = obj.actualSettleAmount;
        options.collectionTime = obj.collectionTime;
        options.invoiceNeed = obj.invoiceNeed;
        options.invoiceProgress = obj.invoiceProgress;
        options.transferVoucher = list;
        options.remark = obj.remark;
        this.form = options;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el_form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .el-form-item {
    flex: 0 0 100%;
    .a_input,
    .a_select {
      width: 100%;
    }
    .a_input {
      ::v-deep input {
        text-align: left;
      }
    }
  }
}
</style>